<template>
	<view class="category">
		
		
		<!-- <view class="top_search_box"><input class="search_input" @click="toSearch" placeholder="搜索商品名称/编号" /></view> -->
		
		<view class="main">
		  <view class="section_left">
		     
		      <view class="li" @click="getGoods(item.id)" v-for="item in category" :class="item.id === categoryActive ? 'on' : ''">
		        <text>{{ item.title }}</text>
		      </view>
		    
		  </view>
		  <view class="section_right">
		    
		      <view class="li" v-for="item in goodsList">
		        <view class="goods_box" @click="goToGoodsView(item.id)">
		          <view class="left"><img :src="item.image" /></view>
		          <view class="left2">
		            <view class="wrap">
		            <view class="title">{{ item.title }}</view>
		            <view class="price">￥{{ item.price }}</view>
		            </view>
		          </view>
		        </view>
		      </view>
		   
		    <view class="box_blank2">没有更多了</view>
		  </view>
		</view>
		
		
		<my-navbar></my-navbar>
	</view>
</template>

<script>
	import myNavbar from '@/components/my-navbar/my-navbar.vue';
	
	export default {
		components: { myNavbar },
		data() {
			return {
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				category: [],
				categoryActive: 0,
				goodsList: []
			}
		},
		onLoad() {
			this.getCategory();
		},
		methods: {
			
			goToGoodsView(goods_id){
				uni.navigateTo({
					url: '../home/goodsViews?id=' + goods_id
				});
			},
			getCategory() {
			  this.$http.post('/shop.index/category', {}).then(res => {
			    this.category = res.data.data.lists;
				
			    console.log(this.category[0].id);
				
			    this.categoryActive = this.category[0].id;
			    this.getGoods(this.categoryActive);
			  });
			},
			// 获取指定分类商品
			getGoods(cid) {
			  this.$http.post('/shop.index/goods', { cid: cid }).then(res => {
				
			    this.goodsList = res.data.data.lists;
				
			    console.log(this.goodsList);
			    this.categoryActive = cid;
			  });
			},
			
		}
	}
</script>

<style lang="scss">

.goods_box {
  border: 1px solid #eee;
  display: flex;
  overflow: hidden;
  .left {
    display: flex;
    align-items: center;
    img {

      width: 160rpx;
      height: 160rpx;
    }
  }
  .left2 {
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    .title {
      color: black;
      font-size: 30rpx;
      overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

    }
    .price {
      color: $colorAccent;
      font-weight: bold;
    }
  }
}

.box_blank {
  height: 50px;
}
.box_blank2 {
  height: 100px;
  text-align: center;
  color: #bbb;
  font-size: 13px;
}

.category {
  height: 100%;
}

.main {
 display: flex; 
  height: calc(100% - 110rpx);
}

.section_right {
  float: left;
  width: 75%;
  height: 100%;
  background: #fff;
  overflow: auto;
 
    .li {
      width: 100%;
      float: left;
      padding: 7px;
      box-sizing: border-box;
    
  }
}

.section_left {
  float: left;
  width: 25%;
  height: 100%;
  overflow: auto;
  background: #f7f7f7;
  .li {
    width: 100%;
    height: 100rpx;
    overflow: hidden;
    border-bottom: 1px solid #eee;

    box-sizing: border-box;
    &.on {
      background: #fff;
      border-right: 0;
    }
    text {
      display: block;
      color: #333;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
    }
  }
}

</style>
